<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="./images/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />
    <title>个人注册</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="./css/loginsum.css" rel="stylesheet">
</head>

<body>
    <div class="top">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <img src="./images/logo.png">
                <img class="tech" src="./images/技术社区.png">
                <span>欢迎注册</span>
                <div class="account">
                    <span>已有账号？</span>
                    <a href="./login.html">请登录></a>
                </div>
            </div>
        </div>
    </div>
    <div class="line"></div>
    <div class="sub1">
        <div class="bar">
            <div class="one">
                <img src="./images/_1.png">
                <p class="onep">验证手机号</p>
            </div>
            <div class="arrow1">
                <img src="./images/arrow.png">
            </div>
            <div class="two">
                <img src="./images/2.png">
                <p class="twop">填写账户信息</p>
            </div>
            <div class="arrow1">
                <img src="./images/arrow.png">
            </div>
            <div class="three">
                <img src="./images/3.png">
                <p class="threep">注册成功</p>
            </div>
        </div>
        <div class="form">
            <form target="myIframe">
                <div class="input">
                    <input type="text" id="form-phone" name="phone" value placeholder="建议使用常用的邮箱" autocomplete="off">
                </div>
                <div class="input-tip">
                    <p id="form-p"></p>
                </div>
                <div class="external">
                    <div class="bg"></div>
                    <div class="worddiv">
                        <span class="word">请按住滑块，滑动到最右边</span>
                    </div>
                    <span class="sliding"></span>
                </div>
                <button class="submit" type="button">下一步</button>
            </form>
        </div>
    </div>
    <div class="sub2">
        <div class="bar">
            <div class="one">
                <img src="./images/1.png">
                <p class="onep">验证手机号</p>
            </div>
            <div class="arrow1">
                <img src="./images/arrow.png">
            </div>
            <div class="two">
                <img src="./images/_2.png">
                <p class="twop">填写账户信息</p>
            </div>
            <div class="arrow1">
                <img src="./images/arrow.png">
            </div>
            <div class="three">
                <img src="./images/3.png">
                <p class="threep">注册成功</p>
            </div>
        </div>
        <div class="form">
            <form target="myIframe">
                <div class="user">
                    <label>用户名</label>
                    <input type="text" id="form-name" name="name" value placeholder="你的账户名与登录名" autocomplete="off">
                </div>
                <div class="input-tip">
                    <p id="form-account"></p>
                </div>
                <div class="onepass">
                    <label>设置密码</label>
                    <input type="password" id="onepass" name="pass" value placeholder="使用两种或两种以上的字符">
                </div>
                <div class="input-tip">
                    <p id="form-powone"></p>
                </div>
                <div class="twopass">
                    <label>确认密码</label>
                    <input type="password" id="twopass" name="pass" value placeholder="请再次输入密码">
                </div>
                <div class="input-tip">
                    <p id="form-powtwo"></p>
                </div>
                <button class="submit" type="button">下一步</button>
            </form>
        </div>
    </div>
    <div class="sub3">
        <div class="row">
            <div class="hidden-xs">
                <div class="bar">
                    <div class="one">
                        <img src="./images/1.png">
                        <p class="onep">验证手机号</p>
                    </div>
                    <div class="arrow1">
                        <img src="./images/arrow.png">
                    </div>
                    <div class="two">
                        <img src="./images/2.png">
                        <p class="twop">填写账户信息</p>
                    </div>
                    <div class="arrow1">
                        <img src="./images/arrow.png">
                    </div>
                    <div class="three">
                        <img src="./images/_3.png">
                        <p class="threep">注册成功</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="photo">
            <img src="./images/形状 2.png">
        </div>
        <div class="text">
            <span>注册成功</span>
        </div>
    </div>

    <div class="foot">
        <div class="link">
            <span><a href="#">关于我们</a></span>
            <span>|</span>
            <span><a href="#">联系我们</a></span>
            <span>|</span>
            <span><a href="#">友情链接</a></span>
        </div>
        <div class="copyright">
            <span>版权所有©&nbsp;&nbsp;长江大学&nbsp;&nbsp;长大在线信息传媒</span>
        </div>
    </div>

    <iframe id="myIframe" name="myIframe"></iframe>

    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="./js/longinsum.js"></script>
</body>

</html>